<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> - bit.coffee</title>

  <link rel="stylesheet" href="../../../assets/style.css">
  
    
      <style>
        
      </style>
    
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
  <meta name="groc-relative-root" content="../../../"/>
  <meta name="groc-document-path" content="../spec/shapes/bit.coffee"/>
  
</head>
<body>
  <div id="file-area">
    <div id="meta">
      <code class="file-path">
      
        <a href="https://github.com/legomushroom/mojs.git/blob/master/../spec/shapes/bit.coffee">../spec/shapes/bit.coffee</a>
      
      </code>
    </div>
    <div id="document">
    
      <div class="segment">
      
      
        <div class="code"><div class="wrapper">Bit   = mojs.Bit
ns    = <span class="hljs-string">'http://www.w3.org/2000/svg'</span>
svg   = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
bit   = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg

describe <span class="hljs-string">'Bit'</span>, <span class="hljs-function">-&gt;</span>
  describe <span class="hljs-string">'context'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'context passed should be real svg node'</span>, <span class="hljs-function">-&gt;</span>
      expect(<span class="hljs-function">-&gt;</span> <span class="hljs-keyword">new</span> Bit).toThrow()
      expect(<span class="hljs-function">-&gt;</span> bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: <span class="hljs-string">'a'</span>).toThrow()
      expect(<span class="hljs-function">-&gt;</span> bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg).<span class="hljs-keyword">not</span>.toThrow()
  describe <span class="hljs-string">'methods'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should have vars method'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.vars).toBeDefined()
  describe <span class="hljs-string">'render method'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should have render method'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.render).toBeDefined()
    it <span class="hljs-string">'should call render method on init'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.isRendered).toBe(<span class="hljs-literal">true</span>)
    it <span class="hljs-string">'should add self to context'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit     = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg
      expect(svg.firstChild).toBeTruthy()
    it <span class="hljs-string">'should run draw method'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit     = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg
      spyOn bit, <span class="hljs-string">'draw'</span>
      bit.render()
      expect(bit.draw).toHaveBeenCalled()
    it <span class="hljs-string">'should not run draw method if isDrawLess option passed'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit     = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:        svg
        <span class="hljs-attribute">isDrawLess</span>: <span class="hljs-literal">true</span>
      spyOn bit, <span class="hljs-string">'draw'</span>
      bit.render()
      expect(bit.draw).<span class="hljs-keyword">not</span>.toHaveBeenCalled()
  describe <span class="hljs-string">'draw method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should set attributes'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit     = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>: svg
        <span class="hljs-attribute">x</span>: <span class="hljs-number">20</span>
        <span class="hljs-attribute">y</span>: <span class="hljs-number">20</span>
        <span class="hljs-attribute">stroke</span>:               <span class="hljs-string">'#0f0'</span>
        <span class="hljs-string">'stroke-width'</span>:          <span class="hljs-number">3</span>
        <span class="hljs-attribute">fill</span>:                 <span class="hljs-string">'#0ff'</span>
        <span class="hljs-string">'stroke-dasharray'</span>:      <span class="hljs-number">100</span>
        <span class="hljs-string">'stroke-dashoffset'</span>:     <span class="hljs-number">50</span>
        <span class="hljs-attribute">angle</span>:                <span class="hljs-number">45</span>
      stroke          = bit.el.getAttribute <span class="hljs-string">'stroke'</span>
      strokeWidth     = bit.el.getAttribute <span class="hljs-string">'stroke-width'</span>
      fill            = bit.el.getAttribute <span class="hljs-string">'fill'</span>
      strokeDasharray = bit.el.getAttribute <span class="hljs-string">'stroke-dasharray'</span>
      strokeOffset    = bit.el.getAttribute <span class="hljs-string">'stroke-dashoffset'</span>
      transform       = bit.el.getAttribute <span class="hljs-string">'transform'</span>
      isTransform     = transform <span class="hljs-keyword">is</span> <span class="hljs-string">'rotate(45, 20, 20)'</span>
      isIE9Transform  = transform <span class="hljs-keyword">is</span> <span class="hljs-string">'rotate(45 20 20)'</span>
      expect(stroke)          .toBe   <span class="hljs-string">'#0f0'</span>
      expect(strokeWidth)     .toBe   <span class="hljs-string">'3'</span>
      expect(fill)            .toBe   <span class="hljs-string">'#0ff'</span>
      expect(strokeDasharray) .toBe   <span class="hljs-string">'100'</span>
      expect(strokeOffset)    .toBe   <span class="hljs-string">'50'</span>
      expect(isTransform <span class="hljs-keyword">or</span> isIE9Transform).toBe <span class="hljs-literal">true</span>
    it <span class="hljs-string">'should save its state'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit     = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>: svg
        <span class="hljs-attribute">x</span>: <span class="hljs-number">20</span>
        <span class="hljs-attribute">y</span>: <span class="hljs-number">20</span>
        <span class="hljs-attribute">stroke</span>:               <span class="hljs-string">'#0f0'</span>
        <span class="hljs-string">'stroke-width'</span>:       <span class="hljs-number">3</span>
        <span class="hljs-string">'fill'</span>:               <span class="hljs-string">'#0ff'</span>
        <span class="hljs-string">'fill-opacity'</span>:       <span class="hljs-string">'#f0f'</span>
        <span class="hljs-string">'stroke-dasharray'</span>:   <span class="hljs-number">100</span>
        <span class="hljs-string">'stroke-dashoffset'</span>:  <span class="hljs-number">50</span>
        <span class="hljs-string">'stroke-linecap'</span>:     <span class="hljs-string">'round'</span>
        <span class="hljs-string">'stroke-opacity'</span>:     .<span class="hljs-number">5</span>
        <span class="hljs-attribute">angle</span>:                <span class="hljs-number">45</span>
      bit.draw()
      expect(bit.state[<span class="hljs-string">'stroke'</span>])           .toBe <span class="hljs-string">'#0f0'</span>
      expect(bit.state[<span class="hljs-string">'stroke-width'</span>])     .toBe <span class="hljs-number">3</span>
      expect(bit.state[<span class="hljs-string">'stroke-opacity'</span>])   .toBe .<span class="hljs-number">5</span>
      expect(bit.state[<span class="hljs-string">'stroke-dasharray'</span>]) .toBe <span class="hljs-number">100</span>
      expect(bit.state[<span class="hljs-string">'stroke-dashoffset'</span>]).toBe <span class="hljs-number">50</span>
      expect(bit.state[<span class="hljs-string">'stroke-linecap'</span>])   .toBe <span class="hljs-string">'round'</span>
      expect(bit.state[<span class="hljs-string">'fill'</span>])             .toBe <span class="hljs-string">'#0ff'</span>
      expect(bit.state[<span class="hljs-string">'fill-opacity'</span>])     .toBe <span class="hljs-string">'#f0f'</span>
      expect(bit.state[<span class="hljs-string">'transform'</span>])        .toBe <span class="hljs-string">'rotate(45, 20, 20)'</span>

    it <span class="hljs-string">'should not set attribute if property not changed -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">3</span>
      spyOn bit.el, <span class="hljs-string">'setAttribute'</span>
      bit.draw()
      expect(bit.el.setAttribute).<span class="hljs-keyword">not</span>.toHaveBeenCalled()

    it <span class="hljs-string">'should set attribute if property changed -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">3</span>
      spyOn bit.el, <span class="hljs-string">'setAttribute'</span>
      bit.setProp <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">4</span>
      bit.draw()
      expect(bit.el.setAttribute).toHaveBeenCalled()

  describe <span class="hljs-string">'setAttrsIfChanged method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should not set attribute if property not changed -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">3</span>
      spyOn bit.el, <span class="hljs-string">'setAttribute'</span>
      bit.props[<span class="hljs-string">'stroke-width'</span>] = <span class="hljs-number">3</span>
      bit.setAttrsIfChanged <span class="hljs-string">'stroke-width'</span>
      expect(bit.el.setAttribute).<span class="hljs-keyword">not</span>.toHaveBeenCalled()

    it <span class="hljs-string">'should set attribute if property changed -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-string">'stroke-width'</span>, <span class="hljs-number">3</span>
      spyOn bit.el, <span class="hljs-string">'setAttribute'</span>
      bit.props[<span class="hljs-string">'stroke-width'</span>] = <span class="hljs-number">4</span>
      bit.setAttrsIfChanged <span class="hljs-string">'stroke-width'</span>
      expect(bit.el.setAttribute).toHaveBeenCalled()

    it <span class="hljs-string">'should save the current value to state if changed -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-string">'stroke-width'</span>, <span class="hljs-number">2</span>
      bit.props[<span class="hljs-string">'stroke-width'</span>] = <span class="hljs-number">30</span>
      bit.setAttrsIfChanged <span class="hljs-string">'stroke-width'</span>
      expect(bit.state[<span class="hljs-string">'stroke-width'</span>]).toBe <span class="hljs-number">30</span>

    it <span class="hljs-string">'should recieve value to set -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-attribute">radius</span>: <span class="hljs-number">20</span>
      bit.setAttrsIfChanged <span class="hljs-string">'radius'</span>, <span class="hljs-number">30</span>
      expect(bit.state[<span class="hljs-string">'radius'</span>]).toBe <span class="hljs-number">30</span>

    it <span class="hljs-string">'should work with values hash -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      svg = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">'svg'</span>)
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>: svg, <span class="hljs-attribute">radius</span>: <span class="hljs-number">20</span>
      bit.setAttrsIfChanged <span class="hljs-attribute">radius</span>: <span class="hljs-number">30</span>, <span class="hljs-attribute">stroke</span>: <span class="hljs-string">'orange'</span>
      expect(bit.state[<span class="hljs-string">'radius'</span>]).toBe <span class="hljs-number">30</span>
      expect(bit.state[<span class="hljs-string">'stroke'</span>]).toBe <span class="hljs-string">'orange'</span></div></div>
      
      </div>
    
      <div class="segment">
      
        <div class="comments ">
          <div class="wrapper"><p>expect(bit.el.getAttribute(&#39;rx&#39;))    .toBe 30
expect(bit.el.getAttribute(&#39;stroke&#39;)).toBe &#39;orange&#39;</p>
</div>
        </div>
      
      
        <div class="code"><div class="wrapper">      
  describe <span class="hljs-string">'setProp method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should set properties -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      bit     = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    svg
        <span class="hljs-attribute">stroke</span>: <span class="hljs-string">'#0f0'</span>

      bit.setProp <span class="hljs-string">'stroke'</span>, <span class="hljs-string">'#ff0000'</span>
      expect(bit.props.stroke).toBe <span class="hljs-string">'#ff0000'</span>

    it <span class="hljs-string">'should set multiple properties -&gt;'</span>, <span class="hljs-function">-&gt;</span>
      bit     = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    svg
        <span class="hljs-attribute">stroke</span>: <span class="hljs-string">'#0f0'</span>

      bit.setProp
        <span class="hljs-attribute">stroke</span>:   <span class="hljs-string">'#ff0000'</span>
        <span class="hljs-attribute">fill</span>:     <span class="hljs-string">'#0000ff'</span>
      expect(bit.props.stroke)  .toBe <span class="hljs-string">'#ff0000'</span>
      expect(bit.props.fill)    .toBe <span class="hljs-string">'#0000ff'</span>
  describe <span class="hljs-string">'setAttr method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should have setAttr method'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.setAttr).toBeDefined()
    it <span class="hljs-string">'should set attribute on element'</span>, <span class="hljs-function">-&gt;</span>
      bit.el = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">"line"</span>)
      bit.setAttr <span class="hljs-string">'stroke'</span>, <span class="hljs-string">'#ff00ff'</span>
      expect(bit.el.getAttribute(<span class="hljs-string">'stroke'</span>)).toBe <span class="hljs-string">'#ff00ff'</span>
    it <span class="hljs-string">'should set multiple attributes on element'</span>, <span class="hljs-function">-&gt;</span>
      bit.el = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">"circle"</span>)
      bit.setAttr
        <span class="hljs-attribute">stroke</span>:           <span class="hljs-string">'#f0f'</span>
        <span class="hljs-attribute">fill</span>:             <span class="hljs-string">'#0f0'</span>
      expect(bit.el.getAttribute(<span class="hljs-string">'stroke'</span>)).toBe <span class="hljs-string">'#f0f'</span>
      expect(bit.el.getAttribute(<span class="hljs-string">'fill'</span>)).toBe   <span class="hljs-string">'#0f0'</span></div></div>
      
      </div>
    
      <div class="segment">
      
        <div class="comments ">
          <div class="wrapper"><p>it &#39;should work with camelCase attribute names&#39;, -&gt;
  bit.el = document.createElementNS?(ns, &quot;rect&quot;)
  bit.setAttr strokeWidth: 2
  expect(bit.el.getAttribute(&#39;stroke-width&#39;)).toBe &#39;2&#39;</p>
</div>
        </div>
      
      
        <div class="code"><div class="wrapper">  describe <span class="hljs-string">'defaults and options'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should have defaults object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.defaults).toBeDefined()
    it <span class="hljs-string">'should have state object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.state).toBeDefined()
    it <span class="hljs-string">'should have drawMap object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.drawMap).toBeDefined()
      expect(bit.drawMapLength).toBeDefined()
    it <span class="hljs-string">'should have options object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.o).toBeDefined()
    it <span class="hljs-string">'should have ratio'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.ratio).toBeDefined()
    it <span class="hljs-string">'should have dafaults'</span>, <span class="hljs-function">-&gt;</span>
      svg     = <span class="hljs-built_in">document</span>.createElementNS?(ns, <span class="hljs-string">"svg"</span>)
      bit     = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">ctx</span>:    svg
      expect(bit.props.radius).toBe(<span class="hljs-number">50</span>)
    it <span class="hljs-string">'should have extendDefaults method'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    svg
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">45</span>
      expect(bit.extendDefaults).toBeDefined()
      expect(<span class="hljs-function">-&gt;</span> bit.extendDefaults()).<span class="hljs-keyword">not</span>.toThrow()
    it <span class="hljs-string">'should extend defaults object to properties'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:            svg
        <span class="hljs-attribute">radius</span>:         <span class="hljs-number">45</span>
        <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">5</span>
      expect(bit.props.radius).toBe(<span class="hljs-number">45</span>)
      expect(bit.props[<span class="hljs-string">'stroke-width'</span>]).toBe(<span class="hljs-number">5</span>)
    it <span class="hljs-string">'should work with 0 values'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:            svg
        <span class="hljs-attribute">radius</span>:         <span class="hljs-number">45</span>
        <span class="hljs-string">'stroke-width'</span>: <span class="hljs-number">5</span>
        <span class="hljs-attribute">points</span>:         <span class="hljs-number">0</span>
      expect(bit.props.points).toBe <span class="hljs-number">0</span>
    it <span class="hljs-string">'should have namespace object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.ns).toBe <span class="hljs-string">'http://www.w3.org/2000/svg'</span>
    it <span class="hljs-string">'should have type object'</span>, <span class="hljs-function">-&gt;</span>
      expect(bit.type).toBeDefined()
  describe <span class="hljs-string">'calculations'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should calculate transform object'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>: svg
        <span class="hljs-attribute">angle</span>: <span class="hljs-number">90</span>
      expect(bit.props.transform).toBe(<span class="hljs-string">'rotate(90, 0, 0)'</span>)
      expect(bit.calcTransform).toBeDefined()

  describe <span class="hljs-string">'foreign el -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should recieve foreign el'</span>, <span class="hljs-function">-&gt;</span>
      el = <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'rect'</span>
      svg.appendChild el
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">el</span>: el
      expect(bit.el).toBe el

    it <span class="hljs-string">'should set isForeign flag'</span>, <span class="hljs-function">-&gt;</span>
      el = <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'rect'</span>
      svg.appendChild el
      bit = <span class="hljs-keyword">new</span> Bit <span class="hljs-attribute">el</span>: el
      expect(bit.isForeign).toBe <span class="hljs-literal">true</span>

  describe <span class="hljs-string">'getLength method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should calculate total length of the path'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      expect(bit.getLength()).toBe <span class="hljs-number">200</span>

    it <span class="hljs-string">'should if el has getTotalLength method, it should use it'</span>, <span class="hljs-function">-&gt;</span>
      path = <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'path'</span>
      path.setAttribute <span class="hljs-string">'d'</span>, <span class="hljs-string">'M0,0 L100,100'</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
        <span class="hljs-attribute">el</span>: path
      expect(bit.getLength()).toBe path.getTotalLength()

    it <span class="hljs-string">'should should call getTotalLength on path only if d attr was set'</span>, <span class="hljs-function">-&gt;</span>
      path = <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'path'</span></div></div>
      
      </div>
    
      <div class="segment">
      
        <div class="comments ">
          <div class="wrapper"><p>path.setAttribute &#39;d&#39;, &#39;M0,0 L100,100&#39;</p>
</div>
        </div>
      
      
        <div class="code"><div class="wrapper">      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
        <span class="hljs-attribute">el</span>:     path
      spyOn path, <span class="hljs-string">'getTotalLength'</span>
      bit.getLength()
      expect(path.getTotalLength).<span class="hljs-keyword">not</span>.toHaveBeenCalled()

  describe <span class="hljs-string">'length tracking -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should track self length'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      expect(bit.props.length).toBe <span class="hljs-number">200</span>

    it <span class="hljs-string">'should call getLength method'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      spyOn bit, <span class="hljs-string">'getLength'</span>
      bit.setProp <span class="hljs-string">'radius'</span>, <span class="hljs-number">200</span>
      bit.draw()
      expect(bit.getLength).toHaveBeenCalled()
</div></div>
      
      </div>
    
      <div class="segment">
      
        <div class="comments ">
          <div class="wrapper"><p>probably not needed <a href="http://jsperf.com/gettotallength-vs-3-functions">http://jsperf.com/gettotallength-vs-3-functions</a>
as getTotalLength is faster then 3 function calls for webkits
and longer for ff and ies, but anyways it is too fast to care about
it &#39;should not call getLength method if radius didnt change&#39;, -&gt;
  bit = new Bit
    ctx:    document.createElementNS ns, &#39;svg&#39;
    radius: 100
    isIt: true
  bit.setAttrsIfChanged &#39;radius&#39;, 100
  bit.draw()
  spyOn bit, &#39;getLength&#39;
  bit.setAttrsIfChanged &#39;radius&#39;, 100
  bit.draw()
  expect(bit.getLength).not.toHaveBeenCalled()</p>
</div>
        </div>
      
      
        <div class="code"><div class="wrapper">  describe <span class="hljs-string">'castPercent method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should cast % values to pixels'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      pixels = bit.castPercent <span class="hljs-number">50</span>
      expect(pixels).toBe (bit.props.length/<span class="hljs-number">100</span>) * <span class="hljs-number">50</span>

  describe <span class="hljs-string">'castStrokeDash method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should not cast pixel values'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      bit.props[<span class="hljs-string">'stroke-dashoffset'</span>] = { <span class="hljs-attribute">unit</span>: <span class="hljs-string">'px'</span>, <span class="hljs-attribute">value</span>: <span class="hljs-number">100</span> }
      bit.castStrokeDash <span class="hljs-string">'stroke-dashoffset'</span>
      expect(bit.props[<span class="hljs-string">'stroke-dashoffset'</span>]).toBe <span class="hljs-number">100</span>

    it <span class="hljs-string">'should cast % values'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      bit.props[<span class="hljs-string">'stroke-dashoffset'</span>] = { <span class="hljs-attribute">unit</span>: <span class="hljs-string">'%'</span>, <span class="hljs-attribute">value</span>: <span class="hljs-number">100</span> }
      bit.castStrokeDash <span class="hljs-string">'stroke-dashoffset'</span>
      expect(bit.props[<span class="hljs-string">'stroke-dashoffset'</span>]).toBe bit.props.length

  describe <span class="hljs-string">'isChanged method -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should check if attribute was changed'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">stroke</span>: <span class="hljs-string">'deeppink'</span>
      expect(bit.isChanged(<span class="hljs-string">'stroke'</span>)).toBe <span class="hljs-literal">false</span>
      bit.setProp <span class="hljs-string">'stroke'</span>, <span class="hljs-string">'green'</span>
      expect(bit.isChanged(<span class="hljs-string">'stroke'</span>)).toBe <span class="hljs-literal">true</span>

    it <span class="hljs-string">'should recieve value to set'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">20</span>
      expect(bit.isChanged(<span class="hljs-string">'radius'</span>, <span class="hljs-number">30</span>)).toBe <span class="hljs-literal">true</span>

  describe <span class="hljs-string">'stroke-dash value setting -&gt;'</span>, <span class="hljs-function">-&gt;</span>
    it <span class="hljs-string">'should set the property from an array'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>: <span class="hljs-number">100</span>
      bit.setProp <span class="hljs-string">'stroke-dasharray'</span>, [{ <span class="hljs-attribute">value</span>: <span class="hljs-number">100</span>, <span class="hljs-attribute">unit</span>: <span class="hljs-string">'px'</span> }]
      bit.draw()
      expect(bit.props[<span class="hljs-string">'stroke-dasharray'</span>]).toBe <span class="hljs-string">'100 '</span>

    it <span class="hljs-string">'should cast % values'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>:  <span class="hljs-number">100</span>
      bit.setProp <span class="hljs-string">'stroke-dasharray'</span>, [
        { <span class="hljs-attribute">value</span>: <span class="hljs-number">100</span>, <span class="hljs-attribute">unit</span>: <span class="hljs-string">'px'</span> }, { <span class="hljs-attribute">value</span>: <span class="hljs-number">50</span>, <span class="hljs-attribute">unit</span>: <span class="hljs-string">'%'</span> }
      ]
      bit.draw()
      dash = (bit.props.length/<span class="hljs-number">100</span>)*<span class="hljs-number">50</span>
      expect(bit.props[<span class="hljs-string">'stroke-dasharray'</span>]).toBe <span class="hljs-string">"100 <span class="hljs-subst">#{dash}</span> "</span>

    it <span class="hljs-string">'should cast % single values'</span>, <span class="hljs-function">-&gt;</span>
      bit = <span class="hljs-keyword">new</span> Bit
        <span class="hljs-attribute">ctx</span>:    <span class="hljs-built_in">document</span>.createElementNS ns, <span class="hljs-string">'svg'</span>
        <span class="hljs-attribute">radius</span>:  <span class="hljs-number">100</span>
      bit.setProp <span class="hljs-string">'stroke-dasharray'</span>, { <span class="hljs-attribute">value</span>: <span class="hljs-number">25</span>, <span class="hljs-attribute">unit</span>: <span class="hljs-string">'%'</span> }
      bit.draw()
      dash = (bit.props.length/<span class="hljs-number">100</span>)*<span class="hljs-number">25</span>
      expect(bit.props[<span class="hljs-string">'stroke-dasharray'</span>]).toBe dash



</div></div>
      
      </div>
    
    </div>
  </div>

  <script src="../../../toc.js"></script>
  <script src="../../../assets/libs.js"></script>
  <script src="../../../assets/behavior.js"></script>

  
    
      <script>
        
      </script>
    
  
</body>
</html>